<section class="header-static">
    <div class="inner">
      <header>
				<% if @query %>
					<h2 class="header-title big source_category_title">Results for <%= @query %></h2>
				<% else %>
					<h2 class="header-title big source_category_title">Search</h2>
				<% end %>	
      </header>
    </div>
</section>
<section class="search-section">
	<div class="inner">
	  <div class="search-box">
        <form action="/search">
          <!-- <svg class="icon"><use xlink:href="#shape-search"></use></svg> -->
          <input type="text" name="query" id="search-input" placeholder="Type your search">
        </form>
	  </div>
	</div>

	<% if @result %>
		<% if @result['items'] %>
		<div class="inner">
      <div id="searchView" class="stories-box">
        <ul>
          <% @result['items'].each do |c| %>
            <li>
              <a href="<%= c['link'] %>">
					  		<% if c['pagemap']%>
					  			<% if c['pagemap']['cse_thumbnail'] %>
							  		<figure class="search-thumbnail">
		                	<div class="bg" style="background-image: url(<%= c['pagemap']['cse_thumbnail'][0]['src'] %>)"></div>
							  		</figure>
					  			<% end %>
					  		<% end %>
                <article class="info">
                  <h4><%= c['title'] %></h4>
                  <p><%= c['htmlSnippet'].html_safe %></p>
                  <button class="btn gray medium">More</button>
                </article>
              </a>
            </li>
          <% end %>
        </ul>
        <div class="section-footer">
          <div id="pagination-container" data-query="<%= @query %>" data-page="<%= @page %>" data-perpage="10" data-total="<%= @total %>"></div>
        </div>      
 			</div>
		</div>
		<% else %>	
		<div class="inner">
			<h2>No results available</h2>
		</div>
		<% end %>	
	<% end %>	
</section>






